<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>航展区概况</title>
    <link rel="stylesheet" href="/css/public.css">
    <link rel="stylesheet" href="/css/main.css">
    <script src="/js/jquery.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/echarts.js"></script>
    <%--地图--%>
    <script src="https://cache.amap.com/lbs/static/es5.min.js"></script>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=f50df840d14861c95415ec7742d42d86&plugin=AMap.Autocomplete,AMap.PlaceSearch,AMap.Geocoder,AMap.DistrictSearch"></script>
    <script src="/js/moment.js"></script>
</head>
<body>
    <div class="container">
        <%--顶部导航--%>
        <div class="nav-area">
            <div class="nav-left">
                <a href="/airRidePoints.do">&lt; 乘车点概况</a>
            </div>
            <div class="nav-center">
                <h1>航展区概况</h1>
            </div>
            <div class="nav-right">
            </div>
        </div>

        <%--滚动信息--%>
        <div class="message-area">
            <ul class="roll__list">
            </ul>
        </div>

        <div class="airshow-area">
            <%--上部--%>
            <div class="airshow-top-area">

                <%--左上-地图--%>
                <div class="airshow-topleft-area">
                    <div class="public-box-title">
                        航展区域图
                    </div>
                    <%--选项--%>
                    <div class="airshow-topleft-options">
                        <div class="new-select select-list" id="areaSelect">
                            <span>航展核心区</span>
                            <ul>
                                <li data-type="area" data-id="0">
                                    航展核心区
                                </li>
                                <li data-type="area" data-id="1">
                                    航展管控区
                                </li>
                                <li data-type="area" data-id="2">
                                    航展引导区
                                </li>
                                <li data-type="area" data-id="3">
                                    珠海市
                                </li>
                                <li data-type="area" data-id="4">
                                    广东省
                                </li>
                            </ul>
                        </div>
                        <div class="new-select check-list" id="carSelect" style="width: 180px;">
                            <ul style="display: block">
                                <%--todo 顺序位置可以任意改，id不变即可--%>
                                <li data-type="car">
                                    车辆显示列表
                                </li>
                                <li data-type="car" data-id="1">
                                    <label>
                                        <input type="checkbox" value="1" checked />
                                        <em></em>
                                        <img src="../../images/bus/hong_bus.png" />
                                        <span>专线大巴</span>
                                    </label>
                                </li>
                                <li data-type="car" data-id="2">
                                    <label>
                                        <input type="checkbox" value="2" checked />
                                        <em></em>
                                        <img src="../../images/bus/qing_bus.png" />
                                        <span>接驳公交</span>
                                    </label>
                                </li>
                                <li data-type="car" data-id="6">
                                    <label>
                                        <input type="checkbox" value="6" checked />
                                        <em></em>
                                        <img src="../../images/bus/zi_bus.png" />
                                        <span>穿梭巴士</span>
                                    </label>
                                </li>
                                <li data-type="car" data-id="3">
                                    <label>
                                        <input type="checkbox" value="3" checked />
                                        <em></em>
                                        <img src="../../images/bus/lan_bus.png" />
                                        <span>旅游大巴</span>
                                    </label>
                                </li>
                                <li data-type="car" data-id="5">
                                    <label>
                                        <input type="checkbox" value="5" checked />
                                        <em></em>
                                        <img src="../../images/bus/huang_bus.png" />
                                        <span>公交车</span>
                                    </label>
                                </li>
                                <li data-type="car" data-id="4">
                                    <label>
                                        <input type="checkbox" value="4" checked />
                                        <em></em>
                                        <img src="../../images/greenCar.png" />
                                        <span>出租车</span>
                                    </label>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <%--地图--%>
                    <div class="airshow-topleft-map" id="container">
                    </div>
                    <%--伸缩按钮--%>
                    <button class="extend-btn" id="showBtn">↓ 展开</button>
                </div>

                <%--右上-车辆统计--%>
                <div class="airshow-topright-area public-box">
                    <div class="public-box-title">
                        区域车辆实时数据
                    </div>
                    <%--数据列表--%>
                    <ul class="airshow-topright-list">
                        <li class="list-box">
                            <div class="list-title">
                                <span class="list-title-name">
                                    <img src="../../images/bus/hong_bus.png" />专线大巴
                                </span>
                                <span class="list-title-data main-color" id="specialSum">0</span>
                            </div>
                            <div class="list-chart">
                                <div class="list-chart-bar" id="special_bar"></div>
                            </div>
                        </li>
                        <li class="list-box">
                            <div class="list-title">
                                <span class="list-title-name">
                                    <img src="../../images/bus/qing_bus.png" />接驳公交
                                </span>
                                <span class="list-title-data main-color" id="boBusSum">0</span>
                            </div>
                            <div class="list-chart">
                                <div class="list-chart-bar" id="boBus_bar"></div>
                            </div>
                        </li>
                        <li class="list-box">
                            <div class="list-title">
                                <span class="list-title-name">
                                    <img src="../../images/bus/zi_bus.png" />穿梭巴士
                                </span>
                                <span class="list-title-data main-color" id="turnBusSum">0</span>
                            </div>
                            <div class="list-chart">
                                <div class="list-chart-bar" id="turnBus_bar"></div>
                            </div>
                        </li>
                        <li class="list-box">
                            <div class="list-title">
                                <span class="list-title-name">
                                    <img src="../../images/bus/lan_bus.png" />旅游大巴
                                </span>
                                <span class="list-title-data main-color" id="travelBusSum">0</span>
                            </div>
                            <div class="list-chart">
                                <div class="list-chart-bar" id="travelBus_bar"></div>
                            </div>
                        </li>
                        <li class="list-box">
                            <div class="list-title">
                                <span class="list-title-name">
                                    <img src="../../images/bus/huang_bus.png" />公交车
                                </span>
                                <span class="list-title-data main-color" id="busSum">0</span>
                            </div>
                            <div class="list-chart">
                                <div class="list-chart-bar" id="bus_bar"></div>
                            </div>
                        </li>
                        <li class="list-box">
                            <div class="list-title">
                                <span class="list-title-name">
                                    <img src="../../images/greenCar.png" />出租车
                                </span>
                                <span class="list-title-data main-color" id="taxiSum">0</span>
                            </div>
                            <div class="list-chart">
                                <div class="list-chart-bar" id="taxi_bar"></div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>

            <%--下部-出租车比较图--%>
            <div class="airshow-bottom-area public-box">
                <div class="public-box-title">
                    出租车趋势比较图
                </div>
                <%--图示--%>
                <div class="chart-label">
                    <span>
                        <em class="yellow-label"></em> 今日车数
                    </span>
                    <span>
                        <em class="white-label"></em> 昨日车数
                    </span>
                    <span>
                        <em class="transparent-label"></em> 上周车数
                    </span>
                </div>
                <%--图表--%>
                <div class="airshow-bottom-chart" id="taxiChart">
                </div>
            </div>

        </div>
    </div>


    <%@ include file="common.jsp" %>
    <script src="/js/airShowArea.js"></script>
    <script>
        var show = false;
        var car_select=[1,2,3,4,5,6];
        $(function () {
            //初始化
            airShowArea.init();
            //单选下拉选择
            $(document).on("click",".airshow-topleft-area .select-list li",function () {
                var optionType = $(this).data("type"),
                        optionVal = $(this).data("id");
                var newHtml = $(this).html();
                $(this).closest("ul").prev("span").html(newHtml);
                if( optionType == "area") changeAreaChart(optionVal);
//                if( optionType == "car") changeCarChart(optionVal-1);
            });
            //多选列表
            $(document).on("click",".airshow-topleft-area .check-list li input[type=checkbox]",function () {
                car_select = new Array();
                $(this).closest("ul").find("input[type=checkbox]:checked").each(function(i,e){
                    car_select[i] = $(e).val();
                });
                console.log(car_select);
                clear_region_markers();
                showMarkers2();
            });

            //模块伸缩
            $("#showBtn").click(function(){
                if(show){
                    $(".airshow-top-area").removeClass("show-big");
                    $(".airshow-bottom-area").removeClass("show-small");
                    show = false;
                    $(this).text("↓ 展开");
                }
                else {
                    $(".airshow-top-area").addClass("show-big");
                    $(".airshow-bottom-area").addClass("show-small");
                    show = true;
                    $(this).text("↑ 收缩");
                    airShowArea.chart.setOption(getEchartOption());
                }
            })
        });

        //切换地图区域
        function changeAreaChart(areaId){
            clear_region_markers();
//            airShowArea.map.remove(province_area);
//            airShowArea.map.remove(airShowArea.polygon);
//            current_area_id = areaId;
//            if(areaId==3){
//                console.log("展示广东省！");
//                airShowArea.map.add(province_area);
//                airShowArea.map.setFitView(province_area);
//            }else {
            console.log("改变地图区域：" + areaId);
            current_area_id = areaId;
            airShowArea.polygon.setPath(area_select[current_area_id]);
//                airShowArea.map.add(airShowArea.polygon);
            // 缩放地图到合适的视野级别
            airShowArea.map.setFitView([airShowArea.polygon]);
//            }
            region_markers = [{}, {}, {}, {}, {},{}];
            initMarker2();
            showMarkers2();
            //todo loading animate 加载动画
            updateSumAndBar();
        }

        //切换车辆显示
        function changeCarChart(carId){
            console.log("改变车辆显示："+ carId);
            current_car_id = carId;
            showMarkers2();
        }
    </script>

</body>
</html>